{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创享博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="icon" href="./favicon.ico">

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">

    <link rel="stylesheet" href="{% static 'lib/font-awesome/css/font-awesome.min.css' %}">

    <link rel="stylesheet" href="{% static 'css/stage.css' %}">

    <link rel="stylesheet" href="{% static 'css/avatar-bg.css' %}">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{% static 'lib/editormd/css/editormd.preview.css' %}">
    <link rel="stylesheet" href="{% static 'background/lib/layui/css/layui.css' %}">
    <style>
        .layui-layer-hui .layui-layer-content {
            color: #ffffff;
        }
    </style>
</head>

<body>
<header id="header">
    <nav id="common-nav" class="navbar-fixed-top" style="background-color: #2C674B" style="color:white">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" style="margin-top: -5px;" href="/"><img class="navbar-logo"
                                                                                src={% static 'images/icon.png' %} height="30"
                                                                                width="30"/></a>
                <a class="navbar-brand" style="color: white;margin-top: 0px;" href="/">创享博客</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <img id="photo" src={% static 'images/headProtraitSmall.png' %} height="25" width="25"
                             style="margin-top: 15px"/>
                    </li>
                    <li>
                        <a class="a globalLoginBtn" href="#" style="color: white">登录/注册</a>
                    </li>
                    <li>
                        <a href="#" style="color: white; display: none" id="logout">注销</a>
                    </li>
                </ul>
                <form class="navbar-form navbar-right" action="/home" id="cse-search-box"
                      style="margin-top: 10px">
                    <input name="title" type="search" class="form-control input-sm" placeholder="标题">
                    <input name="classify" type="search" class="form-control input-sm" placeholder="分类">
                    <input type="submit" style="display:block;overflow:hidden;width:0px;height:0px;position:absolute">
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/" style="color: white">主页</a>
                    </li>
                    <li>
                        <a href="/home" style="color: white">博客</a>
                    </li>
                    <li><a href="/login" style="color: white">后台管理</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="header-main">
        <!--        <h1><a href="./">Hexo</a></h1>-->
    </div>
    <div id="nav">
        <div class="nav-img" id="nav-img"></div>
    </div>
</header>

<div id="content-outer" style="width: 1020px;margin: auto;margin-top: -370px;height: 480px">
    <div id="content-inner" style="width: 1020px">
        <div class="clearfix" style="width: 1020px">

            <div id="recent-posts" style="width: 1020px;height: 480px">
                <div style="padding: 18px 27px 27px">
                        <span style="font-size: 25px;padding-bottom: 7px;padding-top:20px;font-weight: 600;border-bottom: 0 none;margin-top: 10px">
                            <a href="#" style="color: black;margin-top: 7px">个人信息</a>
                        </span>
                </div>


                <div class="col-md-2" style="text-align: center;margin-left: 20px">
                    <img id="profile-photo" src="/static/images/headProtraitSmall.png" height="150" width="150"
                         style="margin-bottom: 10px"/>
                    <button type="button" class="layui-btn" id="photo-upload">
                        <i class="layui-icon">&#xe67c;</i>上传头像
                    </button>
                </div>
                <div class="col-md-9" style="padding: 0 40px;margin-top: -20px">
                    <ul>
                        <li id="btn-area" style="text-align: right;margin-bottom: -10px">
                            <button id="change-password" class="layui-btn">修改密码</button>
                            <button id="edit" class="layui-btn">修改</button>
                            <button class="layui-btn" id="back" style="display: none">返回</button>
                        </li>
                        <hr/>
                        <div id="password-form" style="display: none">
                            <form class="layui-form">
                                <div class="layui-form-item">
                                    <label for="L_username" class="layui-form-label">用户名:
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="L_username" name="username" autocomplete="off"
                                               class="layui-input layui-disabled" readonly="readonly">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_repass" class="layui-form-label">旧密码:
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="L_pass" name="oldpass" required=""
                                               lay-verify="required|pass"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_pass" class="layui-form-label">新密码:
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="L_pass1" name="newpass" required=""
                                               lay-verify="required|pass"
                                               autocomplete="off"
                                               class="layui-input" placeholder="6-16个字符">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_repass" class="layui-form-label">确认密码:</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="L_repass2" name="repass" required=""
                                               lay-verify="required|repass"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="btn-change-password">立即提交
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="info-form">
                            <form id="info" class="layui-form">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">昵称 :</label>
                                    <div class="layui-input-inline">
                                        <input id="name" type="text" name="name" required lay-verify="required"
                                               placeholder="请输入昵称" autocomplete="off" class="layui-input" disabled=""
                                               value="">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_sex" class="layui-form-label">性别</label>
                                    <div class="layui-input-block" id="L_sex">
                                        <input type="radio" name="sex" value="1" title="男" checked>
                                        <input type="radio" name="sex" value="0" title="女">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">电话 :</label>
                                    <div class="layui-input-inline">
                                        <input id="tel" type="text" name="tel" required lay-verify="required|phone"
                                               placeholder="请输入电话" autocomplete="off" class="layui-input" value="">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">邮件 :</label>
                                    <div class="layui-input-inline">
                                        <input id="email" type="text" name="email" required lay-verify="required|email"
                                               placeholder="请输入邮箱" autocomplete="off" class="layui-input" value="">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button id="info-submit" class="layui-btn" lay-submit lay-filter="change-info"
                                                style="display: none">立即提交
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </ul>
                </div>
            </div>

        </div>


    </div>

</div>
</div>
<footer id="footer">
    <div id="copyright">Copyright ©2020</div>
    <div id="theme">
        Designed by <a href="#" target="_blank" rel="noopener">WengDifei XuJianan XueHongtao FengXuyang</a>
    </div>
</footer>
<script src="{% static 'lib/js/waterrippleeffect.min.js' %}"></script>
<script src="{% static 'js/header-bg.main.js' %}"></script>
<script src="{% static 'lib/js/cav.js' %}"></script>
<script src="{% static 'js/avatar-bg.main.js' %}"></script>
<script src="{% static 'background/lib/layui/layui.js' %}" charset="utf-8"></script>
<script src="{% static 'js/base.js' %}"></script>
<script src="{% static 'js/info.js' %}"></script>

</body>
</html>
